<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>折线图</title>
  <link rel="stylesheet" href="css/canvasLine.css">
</head>

<body>
  <div class="box"></div>

  <script src="js/canvasLine.js"></script>
  <script>
    const getTds = activeClass => {
      let active = Math.floor(Math.random() * 10);
      return Array(10).fill().map((v, i) => {
        let num = Math.floor(Math.random() * 100);
        if (i == active) return `<td><span class="${activeClass}">${num}</span></td>`;
        else return `<td><span>${num}</span></td>`;
      }).join('');
    };
    const getTrs = activeClass => {
      return Array(10).fill().map((v, i) => {
        return `<tr>${getTds(activeClass)}</tr>`;
      }).join('');
    };
    const getTable = activeClass => {
      return (`
        <table>
          <thead>
            <tr>${Array(10).fill().map((v, i) => `<th>${i}</th>`).join('')}</tr>
          </thead>
          <tbody>${getTrs(activeClass)}</tbody>
        </table>
      `).replace(/\s*\n\s*/g, '');
    };

    const box = document.querySelector('.box');

    box.insertAdjacentHTML('afterbegin', getTable('red') + getTable('green') + getTable('blue'));

    new CanvasLine({
      table: box,
      lineTypes: [
        { selector: '.red', lineColor: 'red', lineWidth: 1 },
        { selector: '.green', lineColor: 'green', lineWidth: 2 },
        { selector: '.blue', lineColor: 'blue', lineWidth: 3 }
      ]
    });
  </script>
</body>

</html>